<template>
  <div class="address">
    <header>
      <div @click="goBack">
        <i><img src="@/assets/images/icons/fanhui.png"></i>
      </div>
      <h3>收货地址</h3>
      <div></div>
    </header>
    <section>
      <ul>
        <li v-for="(item,index) in list"
          :key="index">
          <div class="path_msg">
            <span v-if="item.isDefault==1" class="default">默认</span>
            <span>{{ item.name }}</span>
            <span>{{item.tel}}</span>
            <br>
            <span>{{ item.province }}-</span>
            <span>{{ item.city }}-</span>
            <span>{{ item.district }}-</span>
            <span>{{ item.address }}</span>
          </div>
          <div class="icon">
            <i class="el-icon-edit" @click="updateAddress(index)"></i>
            <i class="el-icon-delete" @click="deleteAddressFn(item.id)"></i>
          </div>
        </li>
      </ul>
    </section>
    <footer @click="goAddAddress()">新增地址</footer>
  </div>
</template>

<script>
import {api1} from "@/common/api/request";
import {Toast} from "mint-ui";
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
  name: "Address",
  created() {
    this.getData()
  },
  computed:{
    ...mapState({
      list: state => state.address.list
    })
  },
  methods:{
    ...mapMutations(['initGetData']),
    ...mapActions(['deleteAddressFn']),
    //请求接口获取地址数据
    getData(){
      api1({
        url:'/api/selectAddress',
        method:'POST',
        headers:{
          token:true
        }
      }).then(res => {
        this.initGetData(res)
      })
    },
    goBack(){ //返回
      this.$router.back()
    },
    //新增地址 ==> 跳转页面
    goAddAddress(){
      this.$router.push('/addaddress')
    },
    //修改地址 ==》 跳转页面
    updateAddress(id){
      this.$router.push({
        path:'/addaddress',
        query: {id}
      })
    }
  }
}
</script>

<style scoped lang="scss">
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F7F7F7;
  height: 48px;
  img{
    width: 24px;
    height: 24px;
  }
}
.address{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section{
  ul{
    li{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
      border: 1px solid #F7F7F7;
      font-size: 18px;
      .path_msg{
        span{
          padding: 4px;
        }
        .default{
          font-size: 18px;
          color: orangered;
          background-color: pink;
        }
      }
      .icon{
        width: 80px;
        display: flex;
        justify-content: space-around;
      }
    }
  }
}
footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 20px;
}
</style>